<template>
	<view>
		<!-- <StatusBar></StatusBar> -->
		
		<view class="content">
			<image class="mammon-bg" src="../../../static/images/jewel/mammon.jpg" mode="widthFix"></image>
			<image class="bottom-money" src="../../../static/images/jewel/mammon_bg.png" mode="widthFix"></image>
			<image class="money" v-if="isShow" src="../../../static/images/jewel/money.gif" mode="widthFix" ></image>
			<view class="add-num" @tap="togglePopup('showTake')">
				<text>累计流量：</text>
				<view class="number">
					+<countUp :num="flowData.total.num || 0" color="#d8490e" width='13' height='23' fontSize='23'></countUp>
				</view>
			</view>
			<view class="flowData">
				<view class="item" @tap="togglePopup('deal')"><view class="name">{{flowData.deal.name}}</view><view class="num">+{{flowData.deal.num}}</view></view>
				<view class="item" @tap="togglePopup('orders')"><view class="name">{{flowData.order.name}}</view><view class="num">+{{flowData.order.num}}</view></view>
				<view class="item" @tap="togglePopup('zonghe')"><view class="name">{{flowData.zonghe.name}}</view><view class="num">+{{flowData.zonghe.num}}</view></view>
			</view>
		</view>
		
		<view class="lastet-news" v-if="isShowNews">
			<swiper class="news-scroll" autoplay :interval="5000" circular vertical :duration="0" @change="change">
				<swiper-item class="item" v-for="(item, index) in newLotteryList" :key="index">
					<view class="user-pic"><image :src="item.head_pic"></image></view>
					<view class="news-text f-one-ellipsis">{{item.goods_name}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="g-frame-mask" v-if="showPopup" @tap="togglePopup('close')"></view>
		<view class="g-frame" v-if="showPopup">
		    <view class="m-frame-header">
		        <view class="u-frame-title">{{title}}</view>
		        <image class="u-frame-close" src="../../../static/icons/ydt/close.png" @tap="togglePopup('close')"></image>
		    </view>
		
		    <view class="m-frame-content">
		        <view class="m-frame-box">
					<view v-if="!isShowDeital">
						<view class="ture-content">
							<view class="title" v-for="(item, index) in data.shuju" :key="index">{{item.name}}：<text class="num">{{item.num}}</text></view>
							<view class="input"><input type="number" v-model="makerAmount" placeholder="请点击输入转出流量" /></view>
							<view class="tips"><rich-text :nodes="data.remark"></rich-text></view>
						</view>
			
						<view class="m-frame-footer">
							<view class="u-reset" @tap="rest">重置</view>
							<view class="u-confirm" :class="[isCannt?'on':'']" @tap="confirm">确定</view>
						</view>
					</view>
					<view class="deitalList" v-if="isShowDeital">
						<view class="deitalTitle"><text>日期</text><text>流量</text></view>
						<scroll-view class="List" scroll-y="true">
							<view class="item" v-for="(item, index) in detialList" :key="index">
								<text>{{item.create_time}}</text><text>{{item.num}}</text>
							</view>
						</scroll-view>
					</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				isShow: false,
				data:[],
				showPopup: false,
				makerAmount:'',
				isCannt:false,
				isMarker:0,
				flowData:{
					deal: {name: "", num: 0},
					order: {name: "", num: 0},
					total: {name: "", num: 0},
					zonghe: {name: "", num: 0}
				},
				newLotteryList:[],
				isShowNews:false,
				isShowDeital: false,
				detialList:[],
				nodes:'',
				title:''
			}
		},
		methods: {
			togglePopup(type) {
				let that = this
				switch(type){
					case 'showTake':
						that.isShowDeital = false
						if(that.isMarker == 0 || that.isMarker == 3){
							uni.showModal({
								title:'领取流量',
								content:'想领取流量吗？来成为创客吧',
								success: function (res) {
									if (res.confirm) {
										uni.redirectTo({
											url:'/pages/jewel/user/maker?maker_type=3'
										})
									}
								}
							})
						}else{
							uni.navigateTo({
								url:'/pages/jewel/user/mammon_take'
							})
						}
					break;
					case 'deal':
						if(that.flowData.deal.num != 0){
							this.showPopup = true;
							this.isShowDeital = true;
							this.title = '交易流量明细'
							this.getList(type)
						}
					break;
					case 'orders':
						if(that.flowData.order.num != 0){
							this.showPopup = true;
							this.isShowDeital = true;
							this.title = '订单流量明细'
							this.getList(type)
						}
					break;
					case 'zonghe':
						if(that.flowData.zonghe.num != 0){
							this.showPopup = true;
							this.isShowDeital = true;
							this.title = '综合流量明细'
							this.getList(type)
						}
					break;
					case 'close':
						this.showPopup = !this.showPopup;
					break;
				}
				
			},
			rest(){
				this.makerAmount = ''
			},
			confirm(){
				if(this.makerAmount == ''){
					jewel.showToast('请输入退取流量')
				}else{
					uni.navigateTo({
						url:'/pages/jewel/order/hl_checkpwd?makerAmount=' + this.makerAmount + '&pageType=mammon'
					})
				}
			},
			change(){
				this.isShowNews = !this.isShowNews
			},
			getList(type){
				let that = this
				uni.showLoading()
				jewel.get('maker/trafficList',{type:type},false,function(res){
					uni.hideLoading()
					if(res.data.code == 0){
						that.detialList = res.data.data
					}
				});
			}
		},
		onLoad() {
			let that = this
			that.isMarker = uni.getStorageSync('userInfo').is_marker
			jewel.post('Maker/traffic', {}, true, function (res){
				that.flowData = res.data.data
				if(that.isMarker == 1 || that.isMarker == 2){
					that.isShow = true
					setTimeout(() => {
						that.isShow = false
					}, 7000)
				}
			})
			if(that.isMarker != 0 && that.isMarker != 3){
				jewel.post('maker/trafficView', {}, true, function (res){
					that.data = res.data.data
					if(that.data.can == 0) that.isCannt = true
				})
			}
			jewel.get('Maker/buyList',{},false,function(res){
				that.newLotteryList = res.data.data
			});
			
		}
	}
</script>

<style>
	page{
		background: #d41a31;
	}
	.content .mammon-bg{
		width: 100%;
		display: block;
		height: 1334rpx;
	}
	.content .bottom-money{
		width: 100%;
		display: block;
		position: absolute;
		bottom: 0;
		height: 212rpx;
	}
	.content .money{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 11;
	}
	.add-num{
		position: absolute;
		top: 618rpx;
		left: 50%;
		margin-left: -233rpx;
		width: 466rpx;
		height: 70rpx;
		z-index: 10;
		color: #d8490e;
		font-size: 40rpx;
		text-align: center;
		line-height: 70rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-image: url(../../../static/images/jewel/mammon-line.png);
		background-repeat: no-repeat;
		background-size: 466rpx 68rpx;
		background-position: top left;
	}
	.add-num text{
		font-size: 30rpx;
		width: 150rpx;
		margin-left: 30rpx;
	}
	.add-num .number{
		width: 230rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.g-frame {
	    width: 581upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 15%;
	    overflow: hidden;
	    left: 12%;
		z-index: 12;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
	}
	
	.u-frame-title {
	    width: 100%;
	    height: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	    float: left;
	}
	
	.u-frame-close {
	    position: absolute !important;
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    top: 34upx;
	    right: 32upx;
	}
	
	.m-frame-content {
	    width: 100%;
	    height: 100%;
	}
	
	.m-frame-box {
	    width: 505upx;
	    margin: 0 auto;
	    padding-top: 28upx;
	    overflow-y: auto;
		padding-bottom: 100rpx;
	}
	.m-frame-box .ture-content .title{
		font-size: 36rpx;
		padding: 5rpx 0;
	}
	.m-frame-box .ture-content .input{
		padding: 15upx 0;
	}
	.m-frame-box .ture-content .input input{
		width: 99%;
		font-size: 40upx;
		text-align: center;
		border: 1px solid #828080;
		border-radius: 10upx;
		padding: 20upx 0;
	}
	.m-frame-box .ture-content .red{
		color: #D71511;
		margin-right: 10rpx;
	}
	.m-frame-box .ture-content .tips{
		font-size: 30rpx;
		line-height: 50rpx;
	}
	.m-frame-footer {
	    height: 97upx;
	    width: 100%;
	    position: absolute;
	    bottom: 0px;
	    left: 0;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 97upx;
	    text-align: center;
	    font-size: 32upx;
	}
	.m-frame-footer .on{
		background: #CCCCCC;
	}
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16upx;
	}
	.flowData{
		position: absolute;
		top: 780rpx;
		left: 0;
		width: 100%;
	}
	.flowData .item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(255,255,255,0.1);
		line-height: 56rpx;
		padding: 0 85rpx;
		color: #FFFFFF;
		font-size: 35rpx;
		text-shadow:0px 2px 2px #8d0a27;
	}
	.lastet-news{
		position: fixed;
		top: var(--status-bar-height);
		left: 10upx;
		width: 378upx;
		height: 60upx;
		display: flex;
		align-items: center;
		background: rgba(0,0,0,0.7);
		border-radius: 10upx;
		margin-top: 100upx;
		z-index: 10;
		overflow: hidden;
	}
	.lastet-news .user-pic{
		width: 60upx;
		height: 60upx;
		background: #000000;
		overflow: hidden;
		margin-right: 10upx;
	}
	.lastet-news .user-pic image{
		width: 60upx;
		height: 60upx;
	}
	.lastet-news .news-text{
		color: #FFFFFF;
		font-size: 26upx;
		width: 300upx;
	}
	.news-scroll{
		width: 100%;
		height: 60upx;
	}
	.news-scroll .item{
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
		line-height: 60upx;
		height: 60upx;
	}
	.deitalList{
		padding-bottom: 20rpx;
	}
	.deitalList .List{
		height: 500rpx;
	}
	.deitalList view{
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #cccccc;
	}
	.deitalList text{
		flex: 1;
		font-size: 32rpx;
		color: #828080;
		text-align: center;
		padding: 10rpx 0;
	}
	.m-loading{
		z-index: 21;
	}
</style>
